﻿@{
    Layout = null;
}

<!DOCTYPE html>






<!--_meta 作为公共模版分离出去-->
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="~/H-ui/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="~/H-ui/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="~/H-ui/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="~/H-ui/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="~/H-ui/static/h-ui.admin/css/style.css" />
    <link href="~/css/img.css" rel="stylesheet" />
    <script src="~/js/jquery-1.11.0.min.js"></script>
    <title>联系我们</title>
        <script type="text/javascript">
    $(function () {

        var imgL = $(".pic img").size();
        var deg = 360 / imgL;
        var roY = 0, roX = -10;
        var xN = 0, yN = 0;
        var play = null;

        $(".pic img").each(function (i) {
            $(this).css({

                "transform": "rotateY(" + i * deg + "deg) translateZ(300px)"
            });

            $(this).attr('ondragstart', 'return false');
        });

        $(document).mousedown(function (ev) {
            var x_ = ev.clientX;
            var y_ = ev.clientY;
            clearInterval(play);
            console.log('我按下了');
            $(this).bind('mousemove', function (ev) {
                /*获取当前鼠标的坐标*/
                var x = ev.clientX;
                var y = ev.clientY;
                /*两次坐标之间的距离*/
                xN = x - x_;
                yN = y - y_;

                roY += xN * 0.2;
                roX -= yN * 0.1;
                console.log('移动');
                //$('body').append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');

                $('.pic').css({
                    transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'
                });
                /*之前的鼠标坐标*/
                x_ = ev.clientX;
                y_ = ev.clientY;

            });
        }).mouseup(function () {
            $(this).unbind('mousemove');
            var play = setInterval(function () {

                xN *= 0.95;
                yN *= 0.95
                if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {
                    clearInterval(play);
                }
                roY += xN * 0.2;
                roX -= yN * 0.1;
                $('.pic').css({
                    transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'
                });

            }, 30);

        });

    });
        </script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .pic {
                width: 120px;
                height: 180px;
                margin: 150px auto 0;
                position: relative;
                /*transform 旋转元素*/
                transform-style: preserve-3d;
                transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
            }

            body {
                background-color: #66677c;
                overflow: hidden;
            }

            .pic img {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                box-shadow: 0px 0px 10px #fff;
                /*倒影的设置*/
                -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);
            }

            .pic p {
                width: 1200px;
                height: 1200px;
                background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));
                position: absolute;
                top: 100%;
                left: 50%;
                margin-top: -600px;
                margin-left: -600px;
                border-radius: 600px;
                transform: rotateX(90deg);
            }
        </style>
</head>

    <body class="bb1">
        <article class="page-container">
            <div align=center class="d1">
                <marquee style="FONT-SIZE: 35pt; WIDTH: 400px; FILTER: shadow(color=#AF0530); LINE-HEIGHT:15pt; FONT-FAMILY: 隶书; HEIGHT: 80px" scrollamount=6>
                    <h2 style="margin-top:0px;text-align:center"><font color=#f90b46>联系我们 </font></h2>
                </marquee>
            </div>
            <div class="pic">
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/1.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/2.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/3.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/4.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/5.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/6.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/7.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/8.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/9.jpg" /></a>
                <a href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'><img src="~/img/10.jpg" /></a>
                <p href='http://wpa.qq.com/msgrd?v=3&uin=782903169&site=qq&menu=yes'></p>
            </div>
            <footer class="footer mt-20">
                <div class="container">
                    <p>
                        关于我们  |  联系我们    |  项目合作  |  广告植入   |  友情链接<br />
                        版权所有 京ICP备11009069<br />
                        Copyright ©2016 Gaotie.cn
                    </p>
                </div>
            </footer>
            <script type="text/javascript" src="~/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
            <script type="text/javascript" src="~/H-ui/static/h-ui/js/H-ui.min.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/jcarousellite.min.js"></script>
            <!--_footer 作为公共模版分离出去-->
            <script type="text/javascript" src="~/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/layer/2.4/layer.js"></script>
            <script type="text/javascript" src="~/H-ui/static/h-ui/js/H-ui.min.js"></script>
            <script type="text/javascript" src="~/H-ui/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->
            <!--请在下方写此页面业务相关的脚本-->
            <script type="text/javascript" src="~/H-ui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/jquery.validation/1.14.0/validate-methods.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/jquery.validation/1.14.0/messages_zh.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/webuploader/0.1.5/webuploader.min.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/ueditor/1.4.3/ueditor.config.js"></script>
            <script type="text/javascript" src="~/H-ui/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
            <script type="text/javascript" src="~/H-ui/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
            </article>
            <!--/请在上方写此页面业务相关的脚本-->
</body>
</html>